<template>
  <div class="middle-wrap--box">
        <div class="college">
          <!-- <nuxt-link to="/zhiyuan/school"> -->
          <nuxt-link :to="{path:'/zhiyuan/school', query:{batch:batchParam.batch, batchId:batchParam.batchId}}">
            <div class="college-group bottom-line">
              <div class="left">
                <div class="tab_bubble">
                  <span class="title">大学优先填报</span>
                </div>
                <div class="recommend">
                  <div class="recomend-title">推荐：</div>
                  <div class="recomend-box">
                    <div
                      v-if="count.colleges"
                      v-for="(item,index) in count.colleges"
                      :key="index"
                      class="stable"
                    >
                      <div>
                        {{item.batch}} · <span>{{item.count}}</span>&nbsp;所
                      </div>
                    </div>
                    <div
                      class="stable"
                      v-if="!count.colleges"
                    >
                      0 可上大学
                    </div>
                  </div>
                </div>
              </div>
              <div class="more">
                点击进入
              </div>
              <div class="sub">
                1.
              </div>
            </div>
          </nuxt-link>
          <nuxt-link to="/zhiyuan/major">
            <div class="college-group">
              <div class="left">
                <div class="tab_bubble">
                  <span class="title">专业优先填报</span>
                </div>
                <div class="recommend">
                  <div class="recommend-title">推荐：</div>
                  <div class="recommend-box">
                    <div
                      v-if="count.majors"
                      class="stable"
                    >
                      <span>{{count.majors}}</span>&nbsp;个专业
                    </div>
                    <div
                      class="stable"
                      v-else
                    >
                      0 可上专业
                    </div>
                  </div>
                </div>
              </div>
              <div class="more">点击进入</div>
            </div>
          </nuxt-link>
        </div>

        <nuxt-link to="/zhiyuan/alternative" class="alternative">
          <div class="tab_bubble">
            <span class="title">备选库</span>
            <span class="more">点击进入</span>
          </div>
          <div class="sub">
            2.
          </div>
        </nuxt-link>

        <nuxt-link to="/zhiyuan/volunteer" class="volunteer">
          <div class="tab_bubble">
            <span class="title">我的志愿表</span>
            <span class="more">点击进入</span>
          </div>
          <div class="sub">
            3.
          </div>
        </nuxt-link>
  </div>
</template>
<script>
export default {
  data () {
    return {
      count: {
        colleges: '',
        major: ''
      },
      batchParam: {
        batch: '',
        batchId: ''
      }
    }
  },
  methods: {
    init (data) {
      this.count = data

      if (this.count.colleges.length > 0) {
        this.batchParam.batch = this.count.colleges[0]['batch']
        this.batchParam.batchId = this.count.colleges[0]['batchId']
      }
    }
  }
}
</script>
<style scoped lang="scss">
    .middle-wrap--box {
      .alternative:hover,.volunteer:hover{
        background:$gray-bg;
        .sub{
          color:#EAEAEA;
        }
      }
      .college{
        position:relative;
        overflow:hidden;
        background:$light;
        border-radius: 12px;
        .college-group{
          position:relative; z-index: 2;
          display:flex;
          height:130px;
          align-items:center;
          justify-content:space-between;
          &:hover{
            background:$gray-bg;
            .sub{
              color:#EAEAEA;
            }
          }
          &.bottom-line{
            border-bottom:1px solid #F3F3F3;
          }
          .left{
            position: relative; z-index:2;
            flex:1;
            overflow:hidden;
            .tab_bubble{
              border:none;
              padding-top:0;
            }
            .recommend{
              display: flex;
              justify-content: flex-start;
              padding-left:20px;
              color:#ADADAD;
              font-size:18px;
              display:flex;
              .stable{padding:0 10px}
              div{
                // margin-left:20px;
                span{
                  color:$positive;
                }
              }
            }
          }
          .more{
            padding-right:20px;
            font-size:14px;
            color: $positive;
            cursor:pointer;
          }
        }
      }
      .alternative,.volunteer{
        cursor:pointer;
        position:relative;
        overflow:hidden;
        width:100%; height:130px; display: flex;
        border-radius: 12px;
        background:$light;
        margin-top:15px;
        .tab_bubble{
          position:relative; z-index:2;
          width:100%;
          border-bottom:none !important;
        }
      }
      .sub{
        position: absolute; left:0px; top: 0px;
        z-index:1;
        font-size:144px;
        color:#F8F8F8;
        height:130px; line-height:90px;
      }
    }
</style>
